<template>
  <div style="display: inline-block;">{{ count }}</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { animateNumber } from "@/utils/common";
const props = defineProps({
  start: {
    type: [Number, String],
    default: 0,
  },
  end: {
    type: [Number, String],
    default: 0,
  },
  duration: {
    type: [Number, String],
    default: 1000,
  },
})
const count = ref<number>(0)
onMounted(() => {
  animateNumber(props.start, props.end, props.duration, (val: number) => {
    count.value = val;
  });
})
</script>